<!-- 压差曲线 -->
<template>
  <div class="chart-content">
    <div ref="chartRef" class="chart-container" />
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, nextTick, computed, defineExpose } from "vue";
import { queryPointNumChart } from "@/api/modules/operation";
import * as echarts from "echarts";

defineOptions({
  name: "GAS_CONSUMPTION_SPECIALGAS_ANALYSIS"
});
const props = defineProps({
  chartsLineDataObj: {
    type: Object,
    default: () => {}
  },
  waterQualityList: {
    type: Array,
    default: () => []
  },
  waterValue: {
    type: String,
    default: ""
  }
});
const { chartsLineDataObj, waterQualityList, waterValue } = toRefs(props);

onMounted(() => {});

const chartRef = ref(null);
const drawLineChart = () => {
  //过滤出当前是哪个指标
  const currentIndictor = waterQualityList.value.filter(v => {
    return v.itemValue === waterValue.value;
  })[0];
  const { itemName, itemDesc } = currentIndictor;
  const { min: minNum, max: maxNum } = JSON.parse(itemDesc);
  //预测数据
  const predictList = chartsLineDataObj.value.predict.rows;
  const attrName = Object.keys(predictList[0]).filter(v => {
    return v !== "dt";
  })[0];
  //真实数据
  const realtimeList = chartsLineDataObj.value.realtime.rows;
  const xAxisList = predictList.map(v => {
    return v.dt;
  });
  let legendList = [];
  if (predictList.length > 0) {
    legendList.push(`AI Predicted ${itemName}`);
  } else if (realtimeList.length > 0) {
    legendList.push(`Actual ${itemName}`);
  }
  let myChart = echarts.init(chartRef.value);
  let option = {
    title: {
      text: `Water Quality Prediction And Actual ${itemName}`,
      left: "center",
      top: "10"
    },
    tooltip: {
      show: true,
      trigger: "axis"
    },
    legend: {
      show: true,
      type: "plain",
      left: "right",
      data: legendList
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      show: true,
      type: "category",
      data: xAxisList
    },
    yAxis: {
      show: true,
      type: "value",
      max: function (value) {
        if (value.max > maxNum) {
          return Math.ceil(value.max);
        } else {
          return Math.ceil(maxNum);
        }
      }
    },
    series: [
      {
        name: legendList[0],
        data: predictList.map(v => v[attrName]),
        type: "line",
        markLine: {
          data: [
            { name: "最大值", yAxis: maxNum },
            { name: "最小值", yAxis: minNum }
          ]
        }
      },
      {
        name: legendList[1],
        data: realtimeList.map(v => v[[attrName]]),
        type: "line",
        markLine: {
          data: [
            { name: "最大值", yAxis: maxNum },
            { name: "最小值", yAxis: minNum }
          ]
        }
      }
    ]
  };
  nextTick(() => {
    myChart.setOption(option);
  });
};
defineExpose({ drawLineChart });
</script>

<style lang="scss" scoped>
.chart-content {
  width: 100%;
  height: 500px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
